<template>
	<view class="background">
		<view class="logo logo-margin"></view>
		<view class="flex size-input">
			<input type="text" value="" @input="name" maxlength="8" placeholder-class="holder" placeholder="请输入用户名" />
		</view>
		<view class="flex size-input margin">
			<input type="text" @input="password" password="true" value="" maxlength="20" placeholder-class="holder" placeholder="请输入密码" />
			<!-- <view class="icon"></view> -->
		</view>
		<view class="forget-password">
			<navigator url="../password/password">忘记密码?</navigator>
		</view>
		<view class="flex-end btn" @click="next">
			<view class="">
				登录
			</view>

		</view>
		<view class="flex official">
			还没有账户？<text class="clor">
				<navigator url="../inviter/inviter">去注册</navigator>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				passwordt: '',
			}
		},
		methods: {
			next() {
				if (this.username != '' && this.password != '') {
					this.req.request(
						'/login',
						'',
						'POST',
						'username=' + this.username + '&password=' + this.passwordt).then((res) => {
						console.log(res)
						if (res.data.code == '200') {
							this.req.toast('登录成功').then((res) => {
								uni.switchTab({
									url: '../../index/index'
								})
							})
						} else {
							this.req.toast(res.data.message)
						}
					})
				} else {
					this.req.toast('账户密码不可为空')
				}

			},
			name(e) {
				this.username = e.detail.value
			},
			password(e) {
				this.passwordt = e.detail.value
			}
		}
	}
</script>

<style>
	.clor {
		text-align: right;
		color: #F0AD4E;
	}

	.official {
		margin-left: calc(100% - 300rpx);
		width: 300rpx;
		margin-top: 20rpx;
		text-align: right;
		font-size: 28rpx;
		color: #5b473d;
	}

	.bg {
		width: 100%;
		height: 100%;
		/* filter: blur(8rpx); */
		position: fixed;
		z-index: 1;
	}

	.margin {
		margin-top: 80rpx !important;
	}

	.btn>view {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		height: 80rpx;
		margin-top: 160rpx;
		background: #F0AD4E;
		color: #FFFFFF;
		line-height: 80rpx;
		border-radius: 20rpx;
	}

	.forget-password {
		letter-spacing: 3px;
		font-weight: bold;
		color: #F0AD4E;
		width: 180rpx;
		font-size: 28rpx;
		margin-top: 30rpx;
		text-align: center;
		margin-left: calc(100% - 180rpx);
	}

	.holder {
		font-size: 28rpx;
		color: rgb(195, 196, 200);
	}

	input {
		/* font-weight: bold; */
		/* color: #F0AD4E; */
		outline: none;
		border-bottom: 1px solid rgb(248, 248, 248);
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		padding-left: 20rpx;
	}

	.size-input {
		line-height: 60rpx;
		width: 100%;
		height: 60rpx;
		margin-top: 180rpx;
	}

	.text {
		color: #F0AD4E;
		width: 160rpx;
		font-size: 28rpx;
	}

	.logo-margin {
		margin-top: 160rpx;
	}
</style>
